<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<link rel="stylesheet" href="css/main.css">
	<title>设备管理</title>
	<style>
		.mains {
			margin: 2.5%;
			padding: 2.5%;
			background: #ffffff;
			border-radius: 5px;
			font-family: 微软雅黑;
			border: 1px solid #ddd;
			font-weight: bold;
			line-height: 25px;
			font-size: 15px;
		}

		.but {
			border: 2px #0da213 solid;
			color: #0da213;
			padding: 0 8px;
			font-size: 14px;
			float: right;
			border-radius: 5px;
		}
	</style>
</head>

<body>
	<div id="vue-root">
		<div class="contain">
			<div class="header">
				<div class="header_title">设备管理</div>
				<a onclick="history.back()">
					<img src="image/return.png" alt="" class="return">
				</a>
			</div>
		</div>
		<br /><br />

		<div class="mains" v-for="(item,index) in list" :key="item.id">
			<div>设备名称：{{item.name}}
				<span class="but" @click="refresh(item.id)">刷新</span>
			</div>
			<div>设备编号：{{item.code}}</div>
		</div>

	</div>

	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>

	<script>
		var app = new Vue({
			el: '#vue-root',
			data: {
				list: []
			},
			created: function () {
				axios.get('/t/device/list').then(function (res) {
					this.list = res.data;
				}.bind(this));
			},
			methods: {
				refresh: function (id) {
					axios.post('/t/device/refresh/' + id).then(function (res) {
						if (res.data) alert('已发送请求');
						else alert('设备未连接。请检查设备网络连接');
					});
				}
			}
		})
	</script>
</body>

</html>